<template>
	<view>
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
		<u-navbar title="问题答疑" :autoBack="true" leftIconColor="#fff" bgColor="transparent" :titleStyle="{ color: '#fff' }"
			safeAreaInsetTop placeholder></u-navbar>

		<!-- 问题答疑列表 -->
		<view class="qa-container">
			<u-collapse :value="activeNames" @change="onChange">
				<u-collapse-item v-for="item in qaList" :key="item.id" :title="item.question" :name="item.id">
					<view class="answer-content">
						<view v-for="(line, index) in item.answer" :key="index" class="answer-line">
							{{ line }}
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
		data() {
			return {
				activeNames: [], // 默认不展开任何问题
				qaList: [
					{
						id: 1,
						question: '1. 为什么系统不能结算',
						answer: ['系统无法结算可能的原因：', '1. 网络连接异常，请检查网络状态', '2. 账户余额不足，请充值后再试', '3. 系统维护中，请稍后再试', '4. 订单状态异常，请联系客服处理']
					},
					{
						id: 2,
						question: '2. 退押金',
						answer: ['退押金流程：', '1. 在个人中心点击"我的押金"', '2. 选择要退还的押金项目', '3. 确认退还金额和账户', '4. 提交申请后1-3个工作日到账', '如有疑问请联系客服']
					},
					{
						id: 3,
						question: '3. 中途们关上了怎么打开',
						answer: ['中途门关闭的解决方法：', '1. 检查门锁是否正常', '2. 尝试重新刷卡或扫码', '3. 联系现场工作人员协助', '4. 拨打客服电话寻求帮助']
					},
					{
						id: 4,
						question: '4. 门扫不开',
						answer: ['门扫不开的解决方案：', '1. 确认扫码设备是否正常', '2. 检查手机网络连接', '3. 重新打开APP尝试扫码', '4. 联系客服或现场工作人员']
					},
					{
						id: 5,
						question: '5. 客服电话',
						answer: ['客服联系方式：', '400-123-4567（工作时间：周一至周日 8:00-22:00）', '在线客服：APP内"我的-客服中心"']
					},
					{
						id: 6,
						question: '6. 投诉电话',
						answer: ['投诉电话：400-123-4568（24小时服务）', '投诉邮箱：complaint@example.com', '投诉建议：APP内"我的-意见反馈"']
					}
				]
			}
		},
		methods: {
			onChange(value) {
				this.activeNames = value;
			}
		}
	}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	
	z-index: 1;
}

.qa-container {
	margin: 20rpx;
	padding-top: 20rpx;
}

.answer-content {
	padding: 20rpx;
	line-height: 1.6;
	color: #666;
	font-size: 28rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
	margin: 16rpx 0;
}

.answer-line {
	margin-bottom: 12rpx;
}

.answer-line:last-child {
	margin-bottom: 0;
}
</style>
